<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    :onClose="closeDialog"
    width="80%"
    top="48px"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
  >
    <template #footer>
      <t-button :loading="btnLoading" theme="success" @click="onSubmit(0)">暂存</t-button>
      <!-- <t-tooltip content="提交后不可再编辑会进入审批流程"> -->
        <t-button :loading="btnLoading" :disabled="isCommit"  theme="primary" @click="onSubmit(1)">提交</t-button>
      <!-- </t-tooltip> -->
    </template>
    <t-loading :text="formLoadingText" size="medium" :loading="formLoading" showOverlay>
      <template #indicator>
        <t-icon v-if="formLoadingText === '数据读取中...'" name="loading" slot="icon"/>
        <t-icon v-else name="error-circle-filled" slot="icon"/>
      </template>
      <t-form
        labelAlign="left"
        labelWidth="100px"
        :data="formData"
        ref="form"
        :colon="true"
        :rules="edit ? rules : {}"
      >
        <t-row>
          <t-form-item label="一、交通运输研究开发经费内部支出" name="jtysyjkfjfnbzc" labelWidth="260px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jtysyjkfjfnbzc" theme="normal" placeholder="请输入交通运输研究开发经费内部支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jtysyjkfjfnbzc}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="1) 交通运输研究开发经常费支出" name="jtysyjkfjfzc" labelWidth="260px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jtysyjkfjfzc" theme="normal" placeholder="请输入交通运输研究开发经常费支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jtysyjkfjfzc}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span>按用途分</span>
        </t-row>
        <t-row>
          <t-form-item label="人员人工费" name="ytryrgf">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.ytryrgf" theme="normal" placeholder="请输入人员人工费" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.ytryrgf}} 万元</span>
          </t-form-item>
          <t-form-item label="直接投入费" name="ytzjtr">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.ytzjtr" theme="normal" placeholder="请输入直接投入费" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.ytzjtr}} 万元</span>
          </t-form-item>
          <t-form-item label="其他" name="ytqt" labelWidth="60px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.ytqt" theme="normal" placeholder="请输入其他" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.ytqt}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span>按来源分</span>
        </t-row>
        <t-row>
          <t-form-item label="政府资金" name="lyzfzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.lyzfzj" theme="normal" placeholder="请输入政府资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.lyzfzj}} 万元</span>
          </t-form-item>
          <t-form-item label="企业资金" name="lyqyzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.lyqyzj" theme="normal" placeholder="请输入企业资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.lyqyzj}} 万元</span>
          </t-form-item>
          <t-form-item label="事业单位资金" name="lysydwzj" labelWidth="120px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.lysydwzj" theme="normal" placeholder="请输入事业单位资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.lysydwzj}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="国外资金" name="lygwzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.lygwzj" theme="normal" placeholder="请输入国外资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.lygwzj}} 万元</span>
          </t-form-item>
          <t-form-item label="其他资金" name="lyqtzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.lyqtzj" theme="normal" placeholder="请输入其他资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.lyqtzj}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="2) 交通运输研究开发基本建设费" name="jtysyjkfjbjsf" labelWidth="295px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jtysyjkfjbjsf" theme="normal" placeholder="请输入交通运输研究开发基本建设费" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jtysyjkfjbjsf}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span>按用途分</span>
        </t-row>
        <t-row>
          <t-form-item label="仪器设备费" name="ytyqsb">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.ytyqsb" theme="normal" placeholder="请输入仪器设备费" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.ytyqsb}} 万元</span>
          </t-form-item>
          <t-form-item label="土建费" name="yttj" labelWidth="70px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.yttj" theme="normal" placeholder="请输入土建费" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.yttj}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <span>按来源分</span>
        </t-row>
        <t-row>
          <t-form-item label="政府资金" name="jblyzfzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jblyzfzj" theme="normal" placeholder="请输入政府资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jblyzfzj}} 万元</span>
          </t-form-item>
          <t-form-item label="企业资金" name="jblyqyzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jblyqyzj" theme="normal" placeholder="请输入企业资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jblyqyzj}} 万元</span>
          </t-form-item>
          <t-form-item label="事业单位资金" name="jblysydwzj" labelWidth="120px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jblysydwzj" theme="normal" placeholder="请输入事业单位资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jblysydwzj}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="国外资金" name="jblygwzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jblygwzj" theme="normal" placeholder="请输入国外资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jblygwzj}} 万元</span>
          </t-form-item>
          <t-form-item label="其他资金" name="jblyqtzj">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jblyqtzj" theme="normal" placeholder="请输入其他资金" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jblyqtzj}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="二、交通运输研究开发经费外部支出" name="jtysyjkfjfwbzc" labelWidth="280px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jtysyjkfjfwbzc" theme="normal" placeholder="请输入交通运输研究开发经费外部支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jtysyjkfjfwbzc}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="境内研究机构支出" name="jnyjjgzc" labelWidth="140px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jnyjjgzc" theme="normal" placeholder="请输入境内研究机构支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jnyjjgzc}} 万元</span>
          </t-form-item>
          <t-form-item label="境内高等学校支出" name="jngdxxzc" labelWidth="140px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jngdxxzc" theme="normal" placeholder="请输入境内高等学校支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jngdxxzc}} 万元</span>
          </t-form-item>
          <t-form-item label="境内企业支出" name="jnqyzc" labelWidth="115px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jnqyzc" theme="normal" placeholder="请输入境内企业支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jnqyzc}} 万元</span>
          </t-form-item>
        </t-row>
        <t-row>
          <t-form-item label="境内其他单位支出" name="jnqtdwzc" labelWidth="140px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jnqtdwzc" theme="normal" placeholder="请输入境内其他单位支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jnqtdwzc}} 万元</span>
          </t-form-item>
          <t-form-item label="境外单位支出" name="jwdwzc" labelWidth="140px">
            <t-input-adornment v-if="edit" append="万元">
              <t-input-number v-model="formData.jwdwzc" theme="normal" placeholder="请输入境外单位支出" style="width: 120px"></t-input-number>
            </t-input-adornment>
            <span v-else>{{formData.jwdwzc}} 万元</span>
          </t-form-item>
        </t-row>
      </t-form>
    </t-loading>
  </t-dialog>
</template>

<script>
export default {
  name: 'TabResearchAndDevelopmentExpenditureForm',
  props: {
    edit: { type: Boolean, default: true },
    infoId: { type: Number, default: -1 }
  },
  data() {
    return {
      visible: true,
      btnLoading: false,
      formLoading: true,
      formLoadingText: '数据读取中...',
      header: '',
      formData: {
        jtysyjkfjfnbzc: undefined,
        jtysyjkfjfzc: undefined,
        ytryrgf: undefined,
        ytzjtr: undefined,
        ytqt: undefined,
        lyzfzj: undefined,
        lyqyzj: undefined,
        lysydwzj: undefined,
        lygwzj: undefined,
        lyqtzj: undefined,
        jtysyjkfjbjsf: undefined,
        ytyqsb: undefined,
        yttj: undefined,
        jblyzfzj: undefined,
        jblyqyzj: undefined,
        jblysydwzj: undefined,
        jblygwzj: undefined,
        jblyqtzj: undefined,
        jtysyjkfjfwbzc: undefined,
        jnyjjgzc: undefined,
        jngdxxzc: undefined,
        jnqyzc: undefined,
        jnqtdwzc: undefined,
        jwdwzc: undefined,
        approveStatus: '1'
      },
      rules: {
        jtysyjkfjfnbzc: [{ required: true, message: '交通运输研究开发经费内部支出不能为空' }],
        jtysyjkfjfzc: [{ required: true, message: '交通运输研究开发经常费支出不能为空' }],
        ytryrgf: [{ required: true, message: '按用途分-人员人工费不能为空' }],
        ytzjtr: [{ required: true, message: '按用途分-直接投入费不能为空' }],
        ytqt: [{ required: true, message: '按用途分-其他不能为空' }],
        lyzfzj: [{ required: true, message: '按来源分-政府资金不能为空' }],
        lyqyzj: [{ required: true, message: '按来源分-企业资金不能为空' }],
        lysydwzj: [{ required: true, message: '按来源分-事业单位资金不能为空' }],
        lygwzj: [{ required: true, message: '按来源分-国外资金不能为空' }],
        lyqtzj: [{ required: true, message: '按来源分-其他资金不能为空' }],
        jtysyjkfjbjsf: [{ required: true, message: '交通运输研究开发基本建设费不能为空' }],
        ytyqsb: [{ required: true, message: '按用途分-仪器设备费不能为空' }],
        yttj: [{ required: true, message: '按用途分-土建费不能为空' }],
        jblyzfzj: [{ required: true, message: '按来源分-政府资金不能为空' }],
        jblyqyzj: [{ required: true, message: '按来源分-企业资金不能为空' }],
        jblysydwzj: [{ required: true, message: '按来源分-事业单位资金不能为空' }],
        jblygwzj: [{ required: true, message: '按来源分-国外资金不能为空' }],
        jblyqtzj: [{ required: true, message: '按来源分-其他资金不能为空' }],
        jtysyjkfjfwbzc: [{ required: true, message: '交通运输研究开发经费外部支出不能为空' }],
        jnyjjgzc: [{ required: true, message: '交通运输研究开发经费外部支出不能为空' }],
        jngdxxzc: [{ required: true, message: '境内高等学校支出不能为空' }],
        jnqyzc: [{ required: true, message: '境内企业支出不能为空' }],
        jnqtdwzc: [{ required: true, message: '境内其他单位支出不能为空' }],
        jwdwzc: [{ required: true, message: '境外单位支出不能为空' }],
      },
    }
  },
  computed: {
    isCommit() {
      return this.formData.approveStatus !== '1'
    },
  },
  created() {
    if (this.edit) {
      if (this.infoId === -1) {
        this.header = '添加信息记录'
        this.formLoading = false
      } else {
        this.header = '修改信息内容'
        this.getDetail()
      }
    } else if (this.infoId === -1) {
      this.header = '信息错误！！！'
      this.formLoadingText = '信息错误，请联系管理员'
    } else {
      this.header = '查看信息内容'
      this.getDetail()
    }
  },
  methods: {
    // 查看和修改时获取详情
    getDetail() {
      this.$api.kjtjdc.table.devFundingSpend.getInfoById(this.infoId).then(({data}) => {
        this.formData = data;
        this.formLoading = false
      }).catch(e => {
        this.formLoadingText = e
        this.$message.error('数据获取失败，请稍后再试！')
      });
    },
    async onSubmit(isCommit) {
      this.btnLoading = true
      let validRes
      try {
        validRes = await this.$refs.form.validate()
      // eslint-disable-next-line no-empty
      } catch (e) {}
      if (validRes !== true) {
        this.$message.warning('请完善表单')
        this.btnLoading = false
        return
      }
      let action = 'edit'
      if (this.infoId === -1) {
        // 新增
        action = 'add'
      }
      if (isCommit) {
        // 提交
        this.formData.approveStatus = '2'
      } else {
        // 暂存
        this.formData.approveStatus = '1'
      }
      this.$api.kjtjdc.table.devFundingSpend[action](this.formData).then(() => {
        this.$message.success(`${isCommit?'提交':'暂存'}信息成功！`)
        this.btnLoading = false
        this.$emit('update:visible', false);
        this.$emit('reload');
      }).catch(e => {
        this.$message.error(e)
        this.btnLoading = false
      })
    },
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
  }
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding: 5px 10px 0 0;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
.t-form__item {
  margin: 0 35px 0 0;
}
.t-row {
  margin-bottom: 20px;
}
</style>
